<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            padding-bottom: 800px;
        }
        svg{
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div id="app">
        <p>.attr - 将一个绑定强制设置为一个 HTML attribute。</p>
        <p>value:{{ value }}</p>
        <input type="text" @input=" value=$event.target.value ">
        <!-- v-bind 默认操作的是 select的DOM属性value -->
        <!-- <select :value=" value "> -->
        <select :value.attr=" value ">
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
            <option value="D">D</option>
        </select>
        <hr>
        <p>.prop - 将一个绑定强制设置为一个 DOM property。</p>
        <ul>
            <li arg="A" @click="printMsg('A')">A</li>
            <li arg="B" @click="printMsg('B')">B</li>
            <li arg="C" @click="printMsg('C')">C</li>
            <li arg="D" @click="printMsg('D')">D</li>
            <li arg="E" @click="printMsg('E')">E</li>
        </ul>
        <!-- 事件委托 -->
        <ul @click="printMsg2( $event.target )">
            <li arg="A">A</li>
            <li arg="B">B</li>
            <li arg="C">C</li>
            <li arg="D">D</li>
            <li arg="E">E</li>
        </ul>
        <!-- 事件委托 -->
        <ul @click="printMsg3( $event.target )">
            <li :arg.prop=" 'A' ">A</li>
            <li :arg.prop=" 'B' ">B</li>
            <li :arg.prop=" 'C' ">C</li>
            <li :arg.prop=" 'D' ">D</li>
            <li :arg.prop=" 'E' ">E</li>
        </ul>
        <p>.camel - 将 kebab-case attribute 名转换为 camelCase。==> 只针对于 svg 标签</p>
        X:{{ x }}:<input type="range" min="100" max="400" step="10" @input="x=$event.target.value">
        <br>
        Y:{{ y }}::<input type="range" min="100" max="400" step="10" @input="y=$event.target.value"> 
        <br>
        <!-- viewBox 属性必须是驼峰定义规则 -->
        <!-- <svg viewBox="0 0 400 400" width="200" height="200"> -->
        <!-- <svg :viewBox=" `0 0 ${x} ${y}` " width="200" height="200"> -->
        <!-- <svg :view-box=" `0 0 ${x} ${y}` " width="200" height="200"> -->
        <svg :view-box.camel=" `0 0 ${x} ${y}` " width="200" height="200">
            <!-- viewBox 将画板进行栅格化，当栅格完成后内部所有的数值单位为栅格单位 -->
            <circle cx="100" cy="100" r="100" fill="green" />
        </svg>
    </div>
    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data() {
                return {
                    value: "C",
                    x:100,
                    y:100
                }
            },
            methods: {
                printMsg(arg) {
                    console.log("标签记录的值是:", arg)
                },
                printMsg2(dom) {
                    if (dom.tagName == 'LI') {
                        console.log("标签记录的值是:", dom)
                        console.log("标签记录的值是:", dom.getAttribute("arg"))
                    }
                },
                printMsg3(dom) {
                    if (dom.tagName == 'LI') {
                        console.log("标签记录的值是:", dom, dom.arg)
                    }
                }
            }
        }).mount("#app")
    </script>
</body>

</html>